<template>
    <div class="tamplate-list-page">
        <el-card shadow="never" v-loading="loading">
            <div v-if="companyId" class="mb-20">
                <div class="mb-10 flex items-center justify-between">
                    <div>
                        <div>可用学习地图模板</div>
                        <div class="text-xs mt-2 text-gray-500">基于以下学习地图模板，创建自己的学习地图</div>
                    </div>
                </div>
                <div class="flex flex-wrap">
                    <div
                        @click="onAddClick(item)"
                        v-for="item in roleData"
                        :key="item.id"
                        class="flex flex-col justify-between item relative">
                        <div class="text-base title">{{ item.title }}</div>
                        <div class="content w-full">
                            <div class="text-xs">创建人：{{ item.admin_account }}</div>
                            <div class="flex justify-between items-center w-full mt-2">
                                <div class="text-xs">{{ item.created_at | timeFormat }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-between mb-10">
                <div v-if="!companyId">超管创建的模板</div>
                <div v-else>我创建的学习地图</div>
            </div>
            <div class="flex flex-wrap">
                <div
                    @click="onAddClick(item)"
                    v-for="item in data"
                    :key="item.id"
                    class="flex flex-col justify-between item relative">
                    <div v-if="item.is_template" class="text-xs icon">模板</div>
                    <div class="text-base title">{{ item.title }}</div>
                    <div class="content w-full">
                        <div class="text-xs">
                            创建人：{{ item.company_id ? item.company : item.admin_account }}
                        </div>
                        <div class="flex justify-between items-center w-full">
                            <div class="text-xs">{{ item.created_at | timeFormat }}</div>
                            <el-button
                                type="text"
                                class="red-color text-xs"
                                @click.stop="onDeleteClick(item)">删除</el-button>
                        </div>
                    </div>
                </div>
                <div class="flex flex-col justify-center items-center item" @click="onAddClick">
                    <div class="el-icon-plus"></div>
                    <div class="text-xs content mt-4">新建空白学习地图</div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import TimeFormats from '@/helpers/TimeFormats';

export default {
    components: {
    },
    data() {
        return {
            companyId: '',
            loading: false,
            loadingT: false,
            data: [],
            roleData: [],
        };
    },
    filters: {
        timeFormat(time) {
            if (!time) return '';
            return new TimeFormats().convertTime('YYYY-MM-DD hh:mm', time);
        },
    },
    methods: {
        fetchData() {
            this.loading = true;
            API.get('template').then((res) => {
                this.data = res;
            }).finally(() => {
                this.loading = false;
            });
        },
        fetchRoleData() {
            this.loadingT = true;
            API.get('template', {params: {isTemplate: true}}).then((res) => {
                this.roleData = res;
            }).finally(() => {
                this.loadingT = false;
            });
        },
        onAddClick(row) {
            const query = {
                id: row.id,
            };

            this.$router.push({
                name: 'Template.Detail',
                query: row.id ? query : '',
            });
        },
        onDeleteClick(row) {
            $ele.$confirm('是否删除此模板', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`template/${row.id}`, {
                }).then(() => {
                    $ele.$message.success('删除成功');
                    this.fetchData();
                }).finally(() => {
                    this.loading = false;
                });
            }).catch(() => { });
        },
        onDownload() {
            window.location.href = `${process.env.VUE_APP_API_PREFIX}excel/download`;
        },
    },
    mounted() {
        let companyId = '';
        if (sessionStorage.getItem('my/profile')) {
            companyId = JSON.parse(sessionStorage.getItem('my/profile')).company_id;
        }

        if (companyId) {
            this.companyId = companyId;
            this.fetchRoleData();
        }

        this.fetchData();
    },
};
</script>

<style lang="scss">
.tamplate-list-page {
    min-height: 100%;

    .el-card {
        min-height: 100%;
    }

    .input-width {
        max-width: 300px;
    }

    .item {
        width: 250px;
        height: 155px;
        padding: 26px 18px 18px 26px;
        box-shadow: 0 0 3px 1px rgb(240, 240, 240);
        border-radius: 4px;
        margin: 0 20px 20px 0;

        &:hover {
            box-shadow: 0 0 12px 2px rgb(220, 220, 220);
        }

        .content, .el-icon-plus {
            color: #b4b4b4;
        }

        .el-icon-plus {
            font-size: 50px;
        }

        .icon {
            position: absolute;
            top: 0;
            right: 0;
            padding: 5px 10px;
            border-radius: 0 4px;
            background: rgba(24, 144, 255, .1);
            color: rgb(24, 144, 255);
        }
    }
}
</style>
